<template>
    <div class="main">
        <div>
            <slide-header title="新品上市" style="margin-bottom: 6px"/>
            <SlideBar :title="item.title" v-for="(item,index) of buttonList[0]" :list="item.list" :key="index" style="width: 300px"/>
        </div>
        <div class="content">
            <el-row>
                <el-col :span="8" :xl="4" v-for="(item,index) in indexList" :key="index">
                    <div @click="click(item)" style="padding: 12px">
                        <img class="button-icon" :style="{height:logoWidth+'px'}" :src="item.url" @load='justifyImgWidth($event)'/>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import SlideBar from "@/components/slide-bar/index";
    import {indexList, buttonList} from '@/const/btnList'
    import SlideHeader from "@/components/slide-bar/slide-header";

    export default {
        name: "product",
        components: {
            SlideHeader,
            SlideBar
        },
        data() {
            return {
                indexList,
                buttonList,
                logoWidth:100
            }
        },
        methods: {
            click(item) {
                this.$router.push({
                    path: '/product',
                    query: {
                        item
                    }
                })
            },
            justifyImgWidth(e){
                console.log(e.currentTarget.clientWidth)
                this.logoWidth = e.currentTarget.clientWidth
            }
        }
    }
</script>

<style scoped>
    .main {
        display: flex;
        min-width: 1200px;
        width: 80%;
    }

    .content {
        width: 100%;
        margin-left: 60px;
    }

    .button-icon {
        width: 100%;
        background: black;
        overflow: hidden;
    }
</style>